<template>
    <view class="container">
        <header-bar :config="config"></header-bar>
        <scroll-view scroll-y v-if="datas.length > 0">
            <view class="select-level">
                <view class="select-level-item" v-for="(item, index) in datas" @click="selectFn(item)">
                    <text class="select-level-item-name">{{ item.RealName }}</text>
                </view>
            </view>
        </scroll-view>
        <mescroll-empty v-else :option="emptyOption"></mescroll-empty>
    </view>
</template>

<script>
import selectDepartmentTree from "@/components/select/select-department-tree.vue"
import { GetDisPersonnel } from "@/service/api/store.js"
export default {
    components: {
        selectDepartmentTree,
    },
    data() {
        return {
            config: {
                title: "业务员",
                centerSlot: true,
            },
            datas: [],
        }
    },
    mounted() {
        this.getDisPersonnel()
    },
    onShow() {},
    methods: {
        getDisPersonnel() {
            GetDisPersonnel({ joinPosition: 5 }).then((res) => {
                this.datas = res.Data
            })
        },
        selectFn(data) {
            const eventChannel = this.getOpenerEventChannel()
            eventChannel.emit("getSelectData", {
                ...data,
            })
            this.easyGoBack()
        },
    },
}
</script>

<style lang="scss">
.select-level-item {
    padding: $app-page-padding;
    background: $color-white;
    border-bottom: solid 1rpx $border;
    display: flex;
    flex-direction: row;
    align-items: center;
    .select-level-item-name {
        flex: 1;
    }
}
</style>
